<!--
  描述：课程表-单元格
  开发人：hqj
  开发日期：2018年8月22日
-->
<template lang="pug">
  div.table-item.table-item-null(v-if="courseList11.length === 0") // v-on:click="addCourse"
  div.table-item(v-else v-bind:class="'table-item-' + color + (courseList11.length > 1 ? ' table-item-multi' : '')") // v-on:click="showCourseList"
    div
      | {{course[0].courseName}}
    div.room(v-if="courseList11[0].classRoomName")
      | {{course[0].classRoomName}}
</template>

<script>
  // import Vue from 'vue'
  // import Detail from './table-courseList11'
  // import courseList11 from './courseList11'

  export default {
    name: 'kalix-timetable-item',
    props: ['course', 'week', 'no'],
    computed: {
      color() {
        if (this.course[0].valid) return this.week + 1
        else return 'invalid'
      }
    },
    mounted() {
      console.log('item======', this.course)
    },
    methods: {
      /* addCourse(e) {
        const el = e.target
        const name = 'table-item-add'
        if (el.className.indexOf(name) > -1) {
          let courseList11 = new courseList11()
          courseList11.period.week = this.week + 1
          courseList11.period.section = this.no + 1
          this.$store.commit('current', courseList11)
          this.$f7.popup('.popup-courseList11')
          setTimeout(() => {
            el.className = el.className.replace(name, '')
          }, 800)
        } else {
          el.className += ' ' + name
        }
      },
      showCourseList() {
        const self = this
        if (this.courseList11.length === 1) {
          this.showCourseDetail(this.courseList11[0])
        } else {
          let buttons = [{
            text: '该节次对应' + this.courseList11.length + '门课程',
            label: true
          }]
          let departmentsList = this.courseList11.map(item => {
            return {
              text: item.name,
              onClick() {
                self.showCourseDetail(item)
              }
            }
          })
          const cancel = [{
            text: '关闭',
            color: 'red'
          }]
          const groups = [buttons.concat(departmentsList), cancel]
          this.$f7.actions(groups)
        }
      },
      showCourseDetail(courseList11) {
        const CourseConstructor = Vue.extend(Detail)
        const instance = new CourseConstructor({
          parent: this,
          propsData: {
            courseList11
          }
        })
        // 背景模糊
        let $main = document.querySelector('.view-main')
        document.addEventListener('click', e => {
          if (e.target.className === 'layui-m-layershade active-state') {
            $main.style.filter = ''
            if (location.hash === '#detail') history.back()
          }
        }, true)
        $main.style.filter = 'blur(4px)'
        // 监听返回键
        location.href = '#detail'
        window.onhashchange = () => {
          if (location.hash === '') {
            this.$layer.close()
            $main.style.filter = ''
          }
        }
        // 打开弹窗
        this.$store.commit('current', courseList11.origin)
        this.$layer.open({
          title: courseList11.name,
          anim: 'scale',  // vue-layer-mobile并没有实现这个默认是up，通过修改css fixed
          content: instance.$mount().$el.innerHTML
        })
      } */
    }
  }
</script>

<style scoped>
  .room {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
